<template>
  <div class="app-container">
  <!-- searchExtend 增加条件-->
    <Ht-search-form
      :dictMap="dictMap"
      :queryParams="queryParams"
      :outputQueryParams="queryParams"
      :formOptions="formOptions"
      :advOptions="[]"
      permission="user:userInfo:view"
      :beforeSearchCallback="true"
      @beforeSearchCallback="beforeSearchCallback"
      :clearCallBack="clearCallBack"
      :labelWidth="90"
    >
      <template slot="endSlotOption">
        <amount-range-search label="金额区间" ref="amountRangeSearch"></amount-range-search>
      </template>
    </Ht-search-form>

    <ht-table
      ref="dataTable"
      :dictMap="dictMap"
      :queryParams="queryParams"
      :showSerialNumber="false"
      :multi-select="false"
      :tableBindColumns="tableBindColumns"
      :extendColumns="extendColumns"
      :reqConfig="reqConfig"
      :opButtonList="opButtonList"
    >
      <template v-slot:operate>
        <el-table-column label="操作" align="left" width="80" fixed="right" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <ht-button-group
              :buttonList="[
                {
                  label: '明细',
                  doFunc: () => {
                    toViewDetail(scope.row);
                  },
                },
              ]"
            />
          </template>
        </el-table-column>
      </template>
    </ht-table>
    <query-detail-101 ref="queryDetail101" :dictMap="dictMap"></query-detail-101>

  </div>
</template>

<script>
import { apiUrlConfig } from "@/api/ibps/transSearch/transInfo";
import { listPageMixin } from "@/libs/listPageMixin";
import queryDetail101 from "@/views/ibps/businessInquire/components/queryDetail101.vue";
import AmountRangeSearch from "@/views/components/AmountSearchInput/index.vue";

export default {
  name: "ibpsTransIndex",
  mixins: [listPageMixin],
  components: {
    AmountRangeSearch,
      queryDetail101,
  },
  data() {
    return {
      opButtonList: () => {
        return [
        ];
      },
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      // open: false,
      open1: false,
      open2: false,
      // 状态数据字典
      statusOptions: [],
      // 表单参数
      form: {},
      form2: {},
      // loginName: [],
      formOptions: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        txdateBgn:"",
        txdateEnd:"",
        workdateBgn:"",
        workdateEnd:"",
        type:"",
        pbocStatus:"",
        status:"",
        payerName: "",
        payeeName: "",
        amountStart:"",
        amountEnd:"",
      },
      reqConfig:apiUrlConfig,
      searchFormDictList:["IBPS_BANK_STATUS","IBPS_CERT_BIND_STAT","PT_TYPE"],
      // 列信息
      tableBindColumns: [
        { label: `系统日期`, prop: "txdate" ,type: "date" },
        { label: `来往账方向`, prop: "type", dictCode: "IBPS_TYPE", width: "110"},
        { label: `报文编号`, prop: "pkgno",  sortable: false,width: "120" },
        { label: `工作日期`, prop: "workdate",type: "date", width: "100" },
        { label: `报文标识号`, prop: "pkgid" , width: "160" },
        { label: `报文发送时间`, prop: "senderDatetime" ,type: "date",width: "150"},
        { label: `批量标识`, prop: "btFlg" },
        { label: `明细笔数`, prop: "dtlCnt" },
        { label: `明细总金额`, prop: "dltAmt",type: "price", sortable: false },
        { label: `业务标识号`, prop: "seqno", width: "130" },
        { label: `清算方法`, prop: "stMethod" },
        { label: `指令优先级`, prop: "instrPrty",width: "120"  },
        { label: `Charge Bearer`, prop: "chrgBr",width: "130" },
        { label: `端到端标识号`, prop: "e2eId",width: "120" },
        { label: `业务类型编码`, prop: "bizType", width: "130"},
        { label: `货币种类`, prop: "curcd",sortable: false },
        { label: `金额`, prop: "amount", type: "price", sortable: false  },
        { label: `委托时间`, prop: "acceptDate" ,type: "date" },
        { label: `付款人名称`, prop: "payerName", sortable: false  },
        { label: `付款人帐号`, prop: "payerActno", sortable: false  },
        { label: `付款人账户类型`, prop: "payerActtype", sortable: false,width: "150"},
        { label: `付款人开户行名称`, prop: "payerOpBrname", sortable: false,width: "150"},
        { label: `付款清算行行号`, prop: "payerStBrno", sortable: false,width: "150"},
        { label: `付款人开户行所属网银行号`, prop: "payerOpNetbrno", sortable: false ,width: "180"},
        { label: `收款人名称`, prop: "payeeName", sortable: false  },
        { label: `收款人帐号`, prop: "payeeActno", sortable: false  },
        { label: `收款清算行行号`, prop: "payeeStBrno", sortable: false,width: "150"},
        { label: `收款人开户行所属网银行号`, prop: "payeeOpNetbrno", sortable: false,width: "180"},
        { label: `业务种类编码`, prop: "bizCode", sortable: false  },
        { label: `附言`, prop: "remarks", sortable: false  },
        { label: `轧差日期`, prop: "chkDate",type: "date" , sortable: false  },
        { label: `轧差场次`, prop: "chkRound", sortable: false  },
        { label: `清算日期`, prop: "clrDate",type: "date" , sortable: false  },
        { label: `数字签名`, prop: "sign", sortable: false  },
        { label: `加/核签结果`, prop: "signRslt" ,dictCode: "IBPS_SIGN_RSLT", sortable: false  },
        { label: `补发标志`, prop: "resndflg",dictCode: "IBPS_RESEND_FLAG", sortable: false  },
        {
          label: `中心状态`,
          prop: "pbocStatus",
          sortable: false,
          width: "80",
          fixed: "right",
          dictCode: "Cnaps2Dict.PROCESSSTATUS",
        },
        {
          label: `交易状态`,
          prop: "status",
          width: "100",
          fixed: "right",
          dictCode: "IBPS_STATUS",
          sortable: false,
        },
        {
          label: `报文发送时间`,
          prop: "sndTime",
          width: "100",
          type: "date",
          sortable: false,
        },
        {
          label: `报文接收时间`,
          prop: "rcvTime",
          width: "100",
          type: "date",
          sortable: false,
        },
        {
          label: `交易记录时间`,
          prop: "txTime",
          width: "100",
          type: "date",
          sortable: false,
        },
        {
          label: `最后一次状态变更时间`,
          prop: "statTime",
          width: "160",
          type: "date",
          sortable: false,
        },
        {
          label: `PlaceAndName`,
          prop: "plcandnm",
          width: "130",
          sortable: false,
        },
        { label: `原交易标识号`, prop: "oriPkgid",width: "120" },
        { label: `原发起参与机构行号`, prop: "oriSender" ,width: "160"},
        { label: `版本号`, prop: "version" },
        /*{
          label: `批量标识`,
          prop: "pkgNo",
          formatter: (row) => {
            if (!row.pkgNo) {
              return "-";
            }
            return `${row.pkgNo + "-" + row.pkgNoDesc}`;
          },
        },*/

      ],
      curUserId: "",
      flag: false,
      dictMapAsync: {},
    };
  },
  async mounted() {
    const formOptions = [
      {
        type: "dates",
        nameObj: {
          startTimeName: "txdateBgn",
          endTimeName: "txdateEnd",
        },
        defaultAttr: {
          label: "系统日期",
          placeholder: ["请输入开始日期", "请输入结束日期"],
          format: "yyyy-MM-dd",
          valueFormat: "yyyyMMdd",
        },
      },
      {
        type: "dates",
        nameObj: {
          startTimeName: "workdateBgn",
          endTimeName: "workdateEnd",
        },
        defaultAttr: {
          label: "工作日期",
          placeholder: ["请输入开始日期", "请输入结束日期"],
          format: "yyyy-MM-dd",
          valueFormat: "yyyyMMdd",
        },
      },
      {
        type: "dict",
        dict: "IBPS_TYPE",
        prop: "type",
        defaultAttr: {
          label: "来往账标志",
          placeholder: "请选择来往账标志",
        },
      },
      {
        type: "dict",
        dict: "Cnaps2Dict.PROCESSSTATUS",
        prop: "pbocStatus",
        defaultAttr: {
          label: "中心状态",
          placeholder: "请选择中心状态",
        },
      },
      {
        type: "dict",
        dict: "IBPS_STATUS",
        prop: "status",
        defaultAttr: {
          label: "交易状态",
          placeholder: "请选择报文类型",
        },
      },
      {
        type: "input",
        prop: "payerName",
        defaultAttr: {
          label:  '付款人名称',
          placeholder: '请输入付款人名称',
        },
      },
      {
        type: "input",
        prop: "payeeName",
        defaultAttr: {
          label: '收款人名称',
          placeholder: '请输入收款人名称',
        },
      },
    ];
    this.formOptions = formOptions;
    this.dictMapAsync = this.getDictMap();
  },
  methods: {
    beforeSearchCallback() {
      console.log("搜索按钮之前先执行")
      // 搜索按钮之前先执行
      this.queryParams.amountStart = this.$refs.amountRangeSearch.getAmount1();
      this.queryParams.amountEnd = this.$refs.amountRangeSearch.getAmount2();
    },
    clearCallBack() {
      let that = this;
      return new Promise(function (resolve, reject) {
        that.$refs.amountRangeSearch.clearAmount();
        that.queryParams.amountStart = "";
        that.queryParams.amountEnd = "";
        });
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /*查看明细*/
    toViewDetail(row) {
      const queryDetail = this.$refs['queryDetail101'];
      queryDetail.show(row.id);
    },
  },
};
</script>
<style lang="scss" scoped>
.app-container-topSerch {
  min-height: 140px;
  max-height: 300px;
  overflow-y: auto;
}
.app-container-table {
  height: calc(100% - 180px);
  .table-operate {
    height: 32px;
  }
  // .table-content {
  //   height: calc(100% - 32px);
  // }
}
.app-container-footer {
  height: 60px;
}
</style>
